import api from '@/pages/Goods/ListManagement/request';
import shopListApi from '@/pages/Shop/ListManagement/request';
import { DrawerForm, ProFormSelect } from '@ant-design/pro-components';
import { Button, Form } from 'antd';
import { useMemo, useState } from 'react';

export type FormConfig = { Component: any; props: Record<string, any> };
export interface Props {
  data: GoodsListManagementApi.ListResponse;
  onSuccess?: () => void;
  onCancel?: () => void;
}
function GoodsListSelledShopForm(props: Props) {
  const [form] = Form.useForm();
  const [formData, setFormData] = useState<any>({});
  const [shopList, setShopList] = useState<ShopListManagementApi.ListResponse[]>([]);

  const shopListOptions = useMemo(
    () => shopList.map((item) => ({ label: item.shopName, value: item.id, ...item })),
    [shopList],
  );
  const listingTypeOptions = useMemo(() => {
    return [
      { label: '积分商城', value: 1 },
      { label: '生活商城', value: 2 },
    ];
  }, []);

  const getAllShopList = async () => {
    const data = await shopListApi.getAllList();
    setShopList(data);
  };
  const getSelledShopInfo = async (params: GoodsListManagementApi.SelledShopInfoParams) => {
    const data = await api.getSelledShopInfo(params);
    const { shopBaseListingOutputs } = data;
    setFormData({
      ...formData,
      ...data,
      shopId: shopBaseListingOutputs.map((item) => item.shopId),
    });
  };

  const onOpenChange = (open: boolean) => {
    if (open) {
      getAllShopList();
      if (props.data && props.data.goodsId) {
        getSelledShopInfo({ GoodsId: props.data.goodsId });
      }
    } else {
      form.resetFields();
      setFormData({});
      props.onCancel?.();
    }
  };

  const onSubmit = async () => {
    const { shopBaseListingOutputs, listingType, goodsId } = formData;
    const params: GoodsListManagementApi.OnSelledParams = {
      goodsId: [goodsId],
      shopBaseListingOutputs,
      listingType,
    };
    const data = await api.updateOnSelled(params);
    if (data.success) props.onSuccess?.();
    return data.success;
  };

  return (
    <DrawerForm
      autoFocusFirstInput
      title={`商品上架`}
      form={form}
      drawerProps={{ destroyOnClose: true }}
      resize={{
        maxWidth: window.innerWidth * 0.8,
        minWidth: 400,
        onResize() {},
      }}
      trigger={<Button type="link">上架</Button>}
      onOpenChange={onOpenChange}
      onFinish={onSubmit}
    >
      <ProFormSelect
        required
        name="listingType"
        label="上架类型"
        placeholder="请选择上架类型"
        options={listingTypeOptions}
        fieldProps={{
          value: formData.listingType,
          onChange: (value) => {
            setFormData({ ...formData, listingType: value });
          },
        }}
      />
      {formData.listingType === 1 && (
        <ProFormSelect
          required
          name="shopId"
          label="门店列表"
          placeholder="请选择门店"
          options={shopListOptions}
          fieldProps={{
            mode: 'multiple',
            value: formData.shopId,
            onChange: (value, options) => {
              // @ts-ignore
              const shopBaseListingOutputs = options.map((option: any) => ({
                shopId: option.value,
                shopClassifyId: option.shopClassifyId,
                groupId: option.groupId,
              }));
              setFormData({ ...formData, shopId: value, shopBaseListingOutputs });
            },
          }}
        />
      )}
    </DrawerForm>
  );
}

export default GoodsListSelledShopForm;
